<template>
  <div class="bigWarpper w">
    <div class="left">
      <div class="bread"><span>文章攻略</span> / 文章详情</div>
      <h1 class="title">{{ data.title }}</h1>
      <hr />
      <div class="info">攻略：{{ data.updated_at }} 阅读：{{ data.watch }}</div>
      <div class="content" v-html="data.content"></div>
      <div class="control">
        <div class="commit">
          <i class="iconfont iconpinglun"></i>
          <span class="text">评论（{{ data.like }}）</span>
        </div>
        <div class="share">
          <i class="iconfont iconfenxiang"></i>
          <span class="text">分享</span>
        </div>
      </div>
      <!--子组件渲染 -->
      <Comment />
    </div>

    <div class="right">
      <div class="title">相关攻略</div>
      <div
        class="strategy"
        v-for="(item, index) in strategyList"
        :key="index"
        @click="handleTo(item.id)"
      >
        <img
          :src="item.images[0]"
          alt=""
          class="avatar"
          v-if="item.images.length"
        />
        <div class="content">
          <div class="contnetTop">{{ item.title }}</div>
          <div class="info">{{ item.updated_at }} 阅读</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Comment from "@/components/post/comment";
import moment from "moment";
export default {
  data() {
    return {
      data: {},
      strategyList: [],
    };
  },
  watch: {
    async $route() {
      if (this.$route.path === "/post/detail") {
        await this.loadPage();
      }
    },
  },
  methods: {
    handleTo(id) {
      this.$router.push("/post/detail?id=" + id);
      // this.loadPage();
      // window.load();
    },

    loadPage() {
      this.$axios({
        url: "/posts",
        params: {
          id: this.$route.query.id,
        },
      }).then((res) => {
        this.data = res.data.data[0];
        this.data.updated_at = moment(this.data.updated_at).format(
          "YYYY-MM-DD hh:ss"
        );
      });

      //获取推荐文章
      this.$axios({
        url: "/posts/recommend",
        params: {
          id: this.$route.query.id,
        },
      }).then((res) => {
        this.strategyList = res.data.data.map((item) => {
          return {
            ...item,
            updated_at: moment(item.updated_at).format("YYYY-MM-DD hh:ss"),
          };
        });
      });
    },
  },
  component: {
    Comment,
  },
  created() {
    this.loadPage();
  },
};
</script>

<style lang="less" scoped>
.w {
  width: 1000px;
  margin: 20px auto;
}
.bigWarpper {
  display: flex;
  justify-content: space-between;
}

// 列表渲染部分
.left {
  width: 700px;
  .bread {
    font-size: 14px;
    color: #606266;
    cursor: text;
    span {
      cursor: pointer;
      color: #303133;
      font-weight: 500;
    }
  }
  .title {
    margin: 20px 0;
  }
  hr {
    background-color: #dddddd;
    height: 1px;
    border: none;
  }
  .info {
    padding: 20px;
    text-align: right;
    color: #999999;
  }
  .content {
    /deep/ img {
      width: 100%;
    }
  }
  .control {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    .commit {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-right: 30px;
      i {
        color: #ffa500;
        font-size: 30px;
      }
      .text {
        color: #999999;
        font-size: 14px;
        padding-top: 5px;
      }
    }
    .share {
      display: flex;
      flex-direction: column;
      align-items: center;
      i {
        color: #ffa500;
        font-size: 30px;
        border-radius: 5px;
      }
      .text {
        color: #999999;
        font-size: 14px;
        padding-top: 5px;
      }
    }
  }
}

.right {
  width: 280px;
  .title {
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
  }
  .strategy {
    cursor: pointer;
    padding: 15px 0;
    display: flex;
    border-bottom: 1px solid #ddd;
    .avatar {
      width: 100px;
      height: 80px;
      object-fit: cover;
      padding-right: 10px;
    }
    .content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .contnetTop {
        height: 45px;
      }
      .info {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>